<template>
  <div>
    <div>
      <router-link :to="{name: 'env', params: {id: 12}}">12</router-link> | 
      <router-link to="/env/14">14</router-link> | 
      <router-link to="/env/16">16</router-link>
    </div>
    <div>
      {{list}}
    </div>
    <div>
      <button @click="handleClick">click</button>
      <button @click="handleClickInSelf">click in self</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: 12
    }
  },
  mounted() {
    // console.log(this.$route.params.id)
    // console.log(this.$route.params.name)
    console.log(this.$route.meta.num)
  },

  methods: {
    handleClick() {
      this.$router.push({
        path: '/movie',
        query: {
          id: 2
        }
      })
    },
    handleClickInSelf() {
      this.$router.push({
        name: 'env',
        params: {
          id: 16
        }
      })
    }
  },

  beforeRouteEnter(to, from, next) {
    // console.log(this)
    next((vm) => {
      console.log(vm)
    })
  },

  beforeRouteLeave(to, from, next) {
    // console.log(this)
    next()
  },

  // beforeRouteUpdate(to, from, next) {
  //   console.log(0)
  //   next()
  //   // console.log(this)
  //   // console.log(to)
  //   // console.log(from)
  //   this.list = to.params.id
  // },

  // updated() {
  //   console.log(0)
  // },
  // watch: {
  //   $route: {
  //     handler(route) {
  //       this.list = route.params.id
  //     },
  //     immediate: true
  //   }
  // }
}
</script>

<style lang='stylus' scoped>

</style>